<template>
  <div class="pay_res">
    <img v-if="status === 'fail'" style="width: 100;height: 100px;" src="@/assets/img/pay_fail.png" alt="">
    <img v-if="status === 'success'" style="width: 100;height: 100px;" src="@/assets/img/pay_success.png" alt="">
    <div class="pay_status">{{ status === 'fail' ? "党费缴纳失败" : "党费缴纳成功" }}</div>
    <div class="go_back" @click="goBack">返回上一页</div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const status = ref(route.query.status || 'fail');
function goBack() {
  router.push('pay')
}
</script>

<style lang='less' scoped>
.pay_res {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  padding-top: 80px;

  .pay_status {
    color: black;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 700;
    margin-top: 20px;
  }

  .go_back {
    font-size: 16px;
    padding: 10px 30px;
    color: white;
    margin-top: 50px;
    background-color: #d10201;
    display: inline-block;
    border-radius: 30px;
  }
}
</style>